import React, { useState, useEffect } from 'react';
import { Text, View } from 'react-native';

const Blink = (props) => {

    const [isShowingText, setIsShowingText] = useState(true);

    useEffect(() => {
        const toggle = setInterval(() => {
            setIsShowingText(!isShowingText);
        }, 3000);

        return () => clearInterval(toggle);
    })

    if (!isShowingText) {
        return null
    }

    return <Text>{props.text}</Text>
}

const BlinkApp = () => {
    return (
        <View style={{ marginTop: 50 }}>
            <Blink text='I love to blink'></Blink>
            <Blink text='Yes I am'></Blink>
            <Blink text='How are you!'></Blink>
            <Blink text='Fine! 3Q~'></Blink>
        </View>
    )
}

export default BlinkApp